<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>不迷失-Admin book编辑</title>
    <div th:replace="head"></div>
    <link href="http://7xqp2l.com1.z0.glb.clouddn.com/uploadfile.css" rel="stylesheet">
    <!--<script src="http://7xqp2l.com1.z0.glb.clouddn.com/jquery-1.11.2.min.js" type="text/javascript"></script>-->

</head>

<body class="hold-transition skin-blue sidebar-mini ">
<div class="wrapper">

    <div th:replace="header"></div>
    <div th:replace="sidebar"></div>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">

        <!-- Main content -->
        <section class="content">

            <div class="row">
                <div class="col-md-12">
                    <!-- Horizontal Form -->
                    <div class="box box-info">
                        <div class="box-header with-border">
                            <h3 class="box-title">book编辑</h3>
                        </div>
                        <!-- /.box-header -->

                        <h2 th:if="${rep!=null &amp;&amp; !rep.success}" th:text="${rep.msg}"></h2>
                        <!-- form start -->
                        <form th:if="${rep==null || rep.success}" class="form-horizontal" th:action="@{${api}}"
                              method="post">
                            <div class="box-body">
                                <div class="form-group">
                                    <label for="inputEmail3" class="col-sm-2 control-label">名称</label>

                                    <div class="col-sm-10">
                                        <input type="text" name="name" th:value="${rep}?(${rep.data}? ${rep.data.name})"
                                               class="form-control" id="inputEmail3" placeholder=""
                                               required="required" maxlength="50"/>
                                    </div>
                                </div>


                                <div class="form-group">
                                    <label for="inputEmail3" class="col-sm-2 control-label">分类</label>

                                    <div class="col-sm-10">
                                        <select name="catalog"
                                                class="form-control">
                                            <option value="java">java</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="inputEmail3" class="col-sm-2 control-label">封面图片</label>

                                    <div class="col-sm-10">
                                        <div id="fileuploader">Upload</div>
                                        <button id="extrabutton" class="ajax-file-upload-green">上传</button>
                                        <input type="hidden" name="img"
                                               th:value="${rep}?(${rep.data}?(${rep.data.img}?${rep.data.img}))"/>
                                    </div>
                                </div>


                                <div class="form-group">
                                    <label for="inputEmail3" class="col-sm-2 control-label">描述</label>

                                    <div class="col-sm-10">
                                        <input type="text" name="description"
                                               th:value="${rep}?(${rep.data}?(${rep.data.description}?${rep.data.description}))"
                                               class="form-control" id="inputEmail3" placeholder=""
                                               maxlength="200"/>
                                    </div>
                                </div>
                                <br/><br/>
                            </div>
                            <!-- /.box-body -->
                            <div class="box-footer" style="text-align: center;">
                                <button id="submitBtn" type="submit" class="btn btn-info">Submit</button>
                            </div>
                            <!-- /.box-footer -->
                        </form>
                    </div>
                    <!-- /.box -->

                </div>
            </div>
            <!-- /.row -->

        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

    <div th:replace="footer"></div>
</div>
<!-- ./wrapper -->
<div th:replace="script"></div>

<script th:src="@{/js/jquery.serializejson.min.js}"></script>
<script th:src="@{/js/ajax-setup.js}"></script>
<script th:src="@{/js/form-json-submit.js}"></script>
<script src="http://7xqp2l.com1.z0.glb.clouddn.com/jquery.uploadfile.js"></script>
<script>
    $(document).ready(function () {
        var extraObj = $("#fileuploader").uploadFile({
            url: "[(@{/upload/image})]",
            fileName: "editormd-image-file",
            showFileSize: true,
            showDelete: true,
            autoSubmit: false,
            statusBarWidth: 590,
            dragdropWidth: 590,
            dragdropHeight: 200,
            uploadStr: "选择",
            cancelStr: "取消",
            abortStr: "终止",
            deleteStr: "删除",
            dynamicFormData: function () {
                var data = {"_csrf": "[(${_csrf}?${_csrf.token})]"};
                return data;
            },
            onSuccess: function (files, data, xhr, pd) {
                var obj = eval(data);
                console.log(obj);
                $("#img").val(data.url);
            }

        });

        $("#extrabutton").click(function () {
            extraObj.startUpload();
        });

    });
</script>
</body>
</html>